<template>
  <view>
    <!-- <view>{{ username }}</view> -->
    <view>
      person:{{ person.username }}
    </view>
    <button @click="handleChange">改变</button>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue"

//ref对复杂数据类型进行代理
let person = ref({
  username: "张三",
  age: 21
})
// console.log(person)
const handleChange = function () {
  person.value.username = "李四"
}



// let username = ref("张三")    //简单数据类型

// let person = reactive({       //对复杂数据类型设置代理
//   username: "张三丰",
//   age: 21,
//   address: {
//     city: "北京",
//     district: "海淀区",
//     road: "上庄路"
//   }
// })
// console.log(person)

// let person = {
//   username: "张三丰"
// }


// const handleChange = function () {
//   // username.value = "李四"
//   person.username = "张四丰"
// }


</script>

<style style="less" scoped></style>